<template>
	<view>
		<view class="tag-header">
			<view :class="brand" @click="brandClick">
					品牌
			</view>
			<view :class="category" @click="categoryClick">
					分类
			</view>
			<view :class="style" @click="styleClick">
					风格
			</view>
		</view>
		<view class="tag-list">
			<view :class="tagListItem" v-for="item in tagList" :id="item.id" @click="toTagProducts(item.id)">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				tagList: [],
				brand: 'item brand-actived',
				category: 'item',
				style: 'item',
				tagListItem: 'item brand-item'
			}
		},
		methods: {
			init(){
				var that = this
				this.get('tag/getAllTagByType/' + this.type, null, (res) => {
					that.tagList = res.data.list
				})
			},
			brandClick() {
				this.brand = 'item brand-actived'
				this.style = 'item'
				this.category = 'item'
				this.tagListItem = 'item brand-item'
				this.type = 1
				this.init()
			},
			categoryClick(){
				this.category = 'item category-actived'
				this.brand = 'item'
				this.style = 'item'
				this.tagListItem = 'item category-item'
				this.type = 2
				this.init()
			},
			styleClick(){
				this.style = 'item style-actived'
				this.brand = 'item'
				this.tagListItem = 'item style-item'
				this.category = 'item'
				this.type = 3
				this.init()
			},
			toTagProducts(){
				uni.navigateTo({
					url: "../products/products",
					animationType: 'slide-in-right'
				})
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="scss">
	.tag-header{
		display: flex;
		flex-direction: row;
		border-bottom:  2rpx solid #C0C0C0;
		padding: 0 20rpx;
		padding-bottom: 40rpx;
		margin: 50rpx 30rpx ;
		.item {
			width: 33%;
			text-align: center;
			padding: 20rpx 30rpx;
			margin: 20rpx;
			border-radius: 10rpx;
			color: $uni-text-color;
			border: $uni-text-color-placeholder solid 2rpx;
		}
		.brand-actived {
			color: #FFF;
			background-color: $color1;
			border: $color1 solid 2rpx;
		}
		.category-actived {
			color: #FFF;
			background-color: $uni-color-warning;
			border: $uni-color-warning solid 2rpx;
		}
		.style-actived {
			color: #FFF;
			background-color: $color2;
			border: $color2 solid 2rpx;
		}
	}
	
	.tag-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 30rpx;
		.item{
			padding: 10rpx 30rpx;
			margin: 0 10rpx;
			margin-bottom: 20rpx;
			font-size: $uni-font-size-base;
			border-radius: 10rpx;
			border: #C0C0C0 solid 3rpx;
		}
		.brand-item {
			border-color: $color1;
			color: $color1;
		}
		.category-item {
			border-color: $uni-color-warning;
			color: $uni-color-warning;
		}
		.style-item {
			border-color: $color2;
			color: $color2;
		}
	}


</style>
